import React from 'react';
import { cn } from '@/lib/utils';

// 银缕玉衣的模拟数据
const silverThreadJadeSuitData = {
  title: "银缕玉衣",
  subtitle: "2600片玉石的古代宇航服",
  imageDescription: "全身贴玉片，银丝穿缀，汉代贵族“复活甲”",
  basicInfo: {
    age: "东汉",
    material: "和田玉+银丝",
    size: "长1.76m，共用玉2600余片",
    feature: "头罩、手套、鞋子俱全",
    exhibitionHall: "汉代馆",
    amazingFeature: "古人相信玉能防腐，穿上它可肉身不朽、灵魂升天"
  },
  function: "殓服，仅皇帝、诸侯王可使用，是等级与信仰的双重象征。",
  values: [
    {
      title: "工艺复杂",
      description: "每片玉打磨钻孔，银丝编缀"
    },
    {
      title: "完整度高",
      description: "全国出土银缕玉衣不足十件"
    },
    {
      title: "反映生死观",
      description: "体现汉代“事死如事生”观念"
    }
  ],
  studentTask: "找找看，玉衣的哪个部分像手套？哪个部分像鞋？",
  introduction: "我是汉代王爷的“复活甲”，穿着它等待复活，等了快两千年啦！"
};

// 银缕玉衣页面组件
export default function SilverThreadJadeSuitPage() {
  return (
    <div className="max-w-3xl mx-auto bg-white p-4 md:p-6 shadow-sm">
      {/* 顶部横幅区域 */}
      <header className="bg-gradient-to-r from-purple-400 to-indigo-500 text-white rounded-t-lg p-4 mb-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl md:text-3xl font-bold mb-1">{silverThreadJadeSuitData.title}</h1>
            <p className="text-purple-100">{silverThreadJadeSuitData.subtitle}</p>
          </div>
          <div className="bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
            可打印版本
          </div>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main className="space-y-8">
        {/* 文物图片与基本档案区 */}
        <section className="flex flex-col md:flex-row gap-6">
          {/* 文物图片 */}
          <div className="md:w-1/3 flex flex-col items-center">
            <div className="bg-purple-50 w-full aspect-square rounded overflow-hidden flex items-center justify-center mb-2">
                 <img 
  src="https://lf-code-agent.coze.cn/obj/x-ai-cn/279122722562/attachment/收藏‼️南京博物院18件镇院之宝 位置&攻略🔥_8_周末去拍照_来自小红书网页版_20250926144341.jpg" 
  alt="银缕玉衣" 
   className="w-full h-full object-cover p-0" />
            </div>
            <p className="text-sm text-gray-600 text-center italic">
              ▲ {silverThreadJadeSuitData.imageDescription}
            </p>
          </div>

          {/* 基本档案 */}
          <div className="md:w-2/3 bg-gray-50 border-l-4 border-purple-500 p-4">
            <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
              <span className="bg-purple-100 text-purple-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
                ■
              </span>
              基本档案
            </h2>
            <ul className="space-y-2 text-sm text-gray-700">
              <li className="flex">
                <span className="font-medium w-20">年代：</span>
                <span>{silverThreadJadeSuitData.basicInfo.age}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">材质：</span>
                <span>{silverThreadJadeSuitData.basicInfo.material}</span>
              </li>
              <li className="flex"> 
                <span className="font-medium w-20">尺寸：</span>
                <span>{silverThreadJadeSuitData.basicInfo.size}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">特色：</span>
                <span>{silverThreadJadeSuitData.basicInfo.feature}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">展厅：</span>
                <span>{silverThreadJadeSuitData.basicInfo.exhibitionHall}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">神奇之处：</span>
                <span className="font-semibold text-purple-700">{silverThreadJadeSuitData.basicInfo.amazingFeature}</span>
              </li>
            </ul>
          </div>
        </section>

        {/* 它是干什么的？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-2 flex items-center">
            <span className="bg-purple-100 text-purple-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            它是干什么的？
          </h2>
          <p className="text-gray-700 pl-7">{silverThreadJadeSuitData.function}</p>
        </section>

        {/* 为什么这么珍贵？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-purple-100 text-purple-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ▼
            </span>
            为什么这么珍贵？
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {silverThreadJadeSuitData.values.map((value, index) => (
              <div key={index} className="bg-purple-50 p-4 rounded-lg border border-purple-100">
                <h3 className="font-bold text-purple-800 text-sm mb-1 flex items-center">
                  <span className="text-purple-500 mr-1">✔</span>
                  {value.title}
                </h3>
                <p className="text-xs text-gray-700">{value.description}</p>
              </div>
            ))}
          </div>
        </section>

        {/* 幽默自我介绍 */}
        <section className="bg-purple-50 p-4 rounded-lg border-l-4 border-purple-300 mt-4">
          <p className="text-gray-700 italic text-sm">{silverThreadJadeSuitData.introduction}</p>
        </section>

        {/* 观察任务区 */}
        <section className="mt-8">
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-purple-100 text-purple-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            观察任务
          </h2>
          
          <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
            <h3 className="font-bold text-yellow-800 text-sm mb-2">给小学生的观察任务：</h3>
            <p className="text-gray-700 text-sm mb-4">{silverThreadJadeSuitData.studentTask}</p>
            
            <textarea 
              className="w-full border border-dashed border-gray-300 rounded p-3 min-h-[100px] text-sm"
              placeholder="我的发现(在这里写下你的观察):"
            ></textarea>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="mt-8 text-center text-xs text-gray-500 pb-4">
  <p>石头妈妈-南京博物院 · 文物教育系列 · 适合打印学习</p>
      </footer>
    </div>
  );
}